<template>
  <div>
    <!-- 基础信息 -->
    <div class="container-second">
      <div class="form-title">
        <h4>基础信息</h4>
      </div>
      <el-card class="con-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row :gutter="20">
            <!-- 第一行 -->
            <el-col :span="12">
              <el-form-item label="销售单号:">
                <el-select
                  v-model="formInline.user"
                  placeholder="请选择"
                  clearable
                  class="input-width"
                >
                  <el-option label="销售单号1" value="1"></el-option>
                  <el-option label="销售单号2" value="2"></el-option>
                  <el-option label="销售单号3" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订日期:">
                <el-date-picker
                  v-model="formInline.signDate"
                  type="date"
                  placeholder="请选择日期"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <!-- 第二行 -->
            <el-col :span="12">
              <el-form-item label="订单类型:">
                <el-select
                  v-model="formInline.user"
                  placeholder="请选择(信保订单/自己抬头出口订单/第三方)"
                  clearable
                  class="input-width"
                >
                  <el-option label="类型I" value="1"></el-option>
                  <el-option label="类型II" value="2"></el-option>
                  <el-option label="类型III" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订地点">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="订单描述">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同总价">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入(小写)"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="交货时间:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入(天)"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="具体交货日期:">
                <el-date-picker
                  v-model="formInline.signDate"
                  type="date"
                  placeholder="请选择日期"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="付款条件:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="交货地点:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="技术要求:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="产品铸字标识:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="产品表面处理要求:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="产品包装要求:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户公司名称:">
                <el-select
                  v-model="formInline.user"
                  placeholder="请选择"
                  clearable
                  class="input-width"
                >
                  <el-option label="A公司" value="1"></el-option>
                  <el-option label="B公司" value="2"></el-option>
                  <el-option label="C公司" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属销售:">
                <el-select
                  v-model="formInline.user"
                  placeholder="请选择"
                  clearable
                  class="input-width"
                >
                  <el-option label="小李" value="1"></el-option>
                  <el-option label="小王" value="2"></el-option>
                  <el-option label="小赵" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="付款节点:">
                <span>节点名称:</span>
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item>
                <span>节点金额比:</span>
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-button type="primary">清除节点</el-button>
          </el-row>

          <el-row>
            <el-button type="primary">添加节点</el-button>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 其他条款 -->
    <div class="container-second">
      <div class="form-title">
        <h4>其他条款</h4>
      </div>
      <el-card class="con-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="24">
              <el-form-item label="其它条款:">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-title2">
            <h5>买方</h5>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="委托人：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="传真：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="账户：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-title2">
            <h5>卖方</h5>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="委托人：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="传真：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="账户：">
                <el-input
                  v-model="formInline.otherField"
                  placeholder="请输入"
                  clearable
                  class="input-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!-- 合同附件 -->
    <div class="container-second">
      <div class="form-title">
        <h4>合同附件</h4>
      </div>
      <el-card class="con-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 上传组件 -->
          <div class="upload-row">
            <span>合同附件：</span>
            <el-upload
              v-model:file-list="fileList1"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button>↑ 上传文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  文件扩展名：.rar .zip .doc .docx .pdf .jpg...
                </div>
              </template>
            </el-upload>
          </div>

          <!-- 附件信息 -->
          <div class="upload-row">
            <span>附件信息：</span>
            <el-upload
              v-model:file-list="fileList2"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button>↑ 上传文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  文件扩展名：.rar .zip .doc .docx .pdf .jpg...
                </div>
              </template>
            </el-upload>
          </div>
          <!-- + 附件 -->
          <div class="upload-row" style="margin-left: 90px; margin-top: -20px">
            <el-upload
              v-model:file-list="fileList2"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button>+ 附件</el-button>
            </el-upload>
          </div>
        </el-form>
      </el-card>
    </div>

    <div class="container-second">
      <div class="form-title">
        <h4>选择产品</h4>
      </div>
      <el-card class="con-card">
        <el-table :data="tableData" style="width: 100%">
          <!-- 产品名称 -->
          <el-table-column label="产品名称" width="90" align="center">
            <template #default="{ row }">
              <el-input v-model="row.productName" placeholder="请输入" />
            </template>
          </el-table-column>

          <!-- 图号 -->
          <el-table-column label="图号" width="80" align="center">
            <template #default="{ row }">
              <el-input v-model="row.drawingNumber" placeholder="请输入" />
            </template>
          </el-table-column>

          <!-- 材质 -->
          <el-table-column label="材质" width="100" align="center">
            <template #default="{ row }">
              <el-input v-model="row.material" placeholder="请输入" />
            </template>
          </el-table-column>

          <!-- 件数 -->
          <el-table-column label="件数" width="80" align="center">
            <template #default="{ row }">
              <el-input
                v-model="row.quantity"
                placeholder="请输入"
                @input="updateCalculations(row)"
              />
            </template>
          </el-table-column>

          <!-- 预计单重(kg/件) -->
          <el-table-column label="预计单重(kg/件)" width="80" align="center">
            <template #default="{ row }">
              <el-input
                v-model="row.unitWeight"
                placeholder="请输入"
                @input="updateCalculations(row)"
              />
            </template>
          </el-table-column>

          <!-- 预计总重(自动计算) -->
          <el-table-column label="预计总重(kg)" width="80" align="center">
            <template #default="{ row }">
              <span>{{
                (row.quantity * row.unitWeight).toFixed(2) || "0.00"
              }}</span>
            </template>
          </el-table-column>

          <!-- 公斤价 -->
          <el-table-column label="公斤价(元/kg)" width="80" align="center">
            <template #default="{ row }">
              <el-input v-model="row.pricePerKg" placeholder="请输入" />
            </template>
          </el-table-column>

          <!-- 单价 -->
          <el-table-column label="单价" width="80" align="center">
            <template #default="{ row }">
              <el-input
                v-model="row.unitPrice"
                placeholder="请输入"
                @input="updateCalculations(row)"
              />
            </template>
          </el-table-column>

          <!-- 合计(自动计算) -->
          <el-table-column label="合计" width="100" align="center">
            <template #default="{ row }">
              <span>{{
                (row.quantity * row.unitPrice).toFixed(2) || "0.00"
              }}</span>
            </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column label="备注" width="100" align="center">
            <template #default="{ row }">
              <el-input v-model="row.remarks" placeholder="输入备注" />
            </template>
          </el-table-column>

          <!-- 供应商 -->
          <el-table-column label="供应商" width="120" align="center">
            <template #default="{ row }">
              <el-select v-model="row.supplier" placeholder="选择供应商">
                <el-option
                  v-for="supplier in suppliers"
                  :key="supplier"
                  :label="supplier"
                  :value="supplier"
                />
              </el-select>
            </template>
          </el-table-column>
        </el-table>

        <el-button
          style="width: 100%; margin-top: 20px; height: 45px"
          @click="addProduct"
        >
          + 添加产品
        </el-button>
      </el-card>
    </div>
    <el-button type="primary" style="width: 100px; height: 35px"
      >保存</el-button
    >
    <el-button type="info" style="width: 100px; height: 35px"
      >返回列表</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";

const formInline = reactive({
  user: "", // 销售单号
  signDate: "", // 签订日期
  date: "",
  otherField: "" // 新增字段
});
// --------------------------------------------------------
// 供应商列表
const suppliers = ref(["供应商A", "供应商B", "供应商C"]);

// 产品列表
const tableData = ref([
  {
    productName: "",
    drawingNumber: "",
    material: "",
    quantity: 1,
    unitWeight: 1,
    pricePerKg: 1,
    unitPrice: 1,
    remarks: "",
    supplier: "",
    totalWeight: 1,
    totalPrice: 1
  }
]);

// 计算预计总重和合计
const updateCalculations = row => {
  row.totalWeight = row.quantity * row.unitWeight;
  row.totalPrice = row.quantity * row.unitPrice;
};

// 监听数据变化，自动更新计算字段
watchEffect(() => {
  tableData.value.forEach(row => {
    row.totalWeight = row.quantity * row.unitWeight;
    row.totalPrice = row.quantity * row.unitPrice;
  });
});

// 添加产品
const addProduct = () => {
  tableData.value.push({
    productName: "",
    drawingNumber: "",
    material: "",
    quantity: 1,
    unitWeight: 1,
    pricePerKg: 1,
    unitPrice: 1,
    remarks: "",
    supplier: "",
    totalWeight: 1,
    totalPrice: 1
  });
};
// --------------------------------------------------------

// 文件列表（合同附件、附件信息）
const fileList1 = ref<UploadUserFile[]>([]);
const fileList2 = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log("删除文件：", file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = uploadFile => {
  console.log("预览文件：", uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `最多上传 3 个文件，你选择了 ${files.length} 个，当前已上传 ${uploadFiles.length} 个`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定要删除 ${uploadFile.name} 吗？`).then(
    () => true,
    () => false
  );
};
</script>

<style scoped>
.container-second {
  width: 950px;
  border: 1px solid #d5cccc;
  margin-bottom: 15px;
}

.con-card {
  width: 950px;
}

.form-title {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  background-color: #f0f2f5;
}

.form-title2 {
  margin-bottom: 10px;
}

.upload-demo {
  margin-top: 10px;
}

.el-upload__tip {
  font-size: 12px;
  color: #999;
}

.upload-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.upload-row span {
  font-weight: bold;
  margin-right: 10px;
}

.demo-form-inline {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制每行间距 */
}

.el-row {
  display: flex;
  justify-content: space-between; /* 确保每个输入框在各自的列中平衡 */
}

.el-col {
  display: flex;
  align-items: flex-start; /* 输入框与标签上下对齐 */
}

.el-form-item {
  width: 100%; /* 确保每个表单项占满宽度 */
}

.el-form-item label {
  width: 120px; /* 可根据需求调整标签宽度 */
  text-align: right; /* 标签右对齐 */
}

.input-width {
  width: 100%; /* 控制每个输入框的宽度 */
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%; /* 确保输入框、选择框、日期选择器占满父容器宽度 */
}
</style>
